{include file="public/header" $title="首页" /}
    <style>
        .layui-tab-item{height: 700px}
    </style>
</header>
<body>

<div class="layui-layout layui-layout-admin">
    <!--头部开始-->
    <div class="layui-header">
        <div class="layui-logo">Ecms通用管理后台</div>
        <!-- 头部区域（可配合layui已有的水平导航） -->
        <ul class="layui-nav layui-layout-left">
            <li class="layui-nav-item layadmin-flexible" lay-unselect>
                <a href="javascript:;" layadmin-event="flexible" title="侧边伸缩">
                    <i class="layui-icon layui-icon-shrink-right" id="LAY_app_flexible"></i>
                </a>
            </li>
            <li class="layui-nav-item" lay-unselect>
                <a href="javascript:;" layadmin-event="refresh" title="刷新" class="refresh">
                    <i class="layui-icon layui-icon-refresh-3"></i>
                </a>
            </li>
            <li class="layui-nav-item layui-hide-xs" lay-unselect style="height: 60px">
                <input style="margin-top: 11px" type="text" placeholder="搜索..." autocomplete="off" class="layui-input layui-input-search" layadmin-event="serach" lay-action="template/search.html?keywords=">
            </li>
        </ul>
        <ul class="layui-nav layui-layout-right">
            <li class="layui-nav-item">
                <a href="javascript:;">
                    登录IP:{if isset($newIp)}{$newIp.ip}{/if}
                </a>
                {if isset($ipArr)}
                <dl class="layui-nav-child">
                    {volist name="ipArr" id="vo"}
                    <dd><a href="javascript:;">{$vo.ctime} ~ {$vo.ip}</a></dd>
                    {/volist}
                </dl>
                {/if}
            </li>
            <li class="layui-nav-item"><a href="javascript:0;" class="layui-icon layui-icon-notice" style="color: #FF5722" id="imShow"></a></li>
            <li class="layui-nav-item">
                <a href="javascript:;">
                    {if isset($adminInfo.portrait)}<img src="__HOSTURI__{$adminInfo.portrait}" class="layui-nav-img">{/if}
                    <span>{if isset($adminInfo.role)}{$adminInfo.role}{/if}：</span>&nbsp;<span>{if isset($adminInfo.username)}{$adminInfo.username}{/if}</span>
                </a>
                <dl class="layui-nav-child">
                    <dd id="basedata"><a href="javascript:void(0);">基本资料</a></dd>
                    <dd id="safety"><a href="javascript:void(0);">安全设置</a></dd>
                </dl>
            </li>
            <li class="layui-nav-item"><a href="{:url('nadmin/login/loginOut')}">退了</a></li>
        </ul>
    </div>
    <!--头部结束-->
    <!--左侧选项栏目开始-->
    <div class="layui-side layui-bg-black" >
        <div class="layui-side-scroll">
            <ul class="layui-nav layui-nav-tree layui-inline" lay-filter="demo" style="margin-right: 10px;">
                {if isset($menuList) && is_array($menuList)}
                {foreach $menuList  as $k=>$v}
                <li class="layui-nav-item">
                    <a href="javascript:;">{$v.title}</a>
                    {if isset($v.son) && is_array($v.son)}
                    <dl class="layui-nav-child">
                        {foreach $v.son as $key=>$val}
                        <dd class="layui-nav-itemed">
                            <a href="javascript:;" lay-href="{:url($val.url)}" id="{$val.controller}_{$val.action}" class="site-demo-active" data-type="tabAdd">&nbsp;&nbsp;&nbsp;{$val.title}</a>
                            {if isset($val.son) && is_array($val.son)}
                            <dl class="layui-nav-child">
                                {foreach $val.son as $vo}
                                <dd class="layui-nav-itemed">
                                    <a href="javascript:;" lay-href="{:url($vo.url)}" id="{$vo.controller}_{$vo.action}" class="site-demo-active" data-type="tabAdd">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{$vo.title}</a>
                                </dd>
                               {/foreach}
                            </dl>
                            {/if}
                        </dd>
                        {/foreach}
                    </dl>
                    {/if}
                </li>
                {/foreach}
                {/if}
            </ul>
        </div>
    </div>
    <!--左侧选项结束-->
    <!--右侧上面搜索开始-->

    <div class="layui-tab layui-body" lay-filter="tab" lay-unauto lay-allowClose="true" lay-filter="layadmin-layout-tabs" id="LAY_app_body" style="bottom: 0;">
        <ul class="layui-tab-title" id="LAY_app_tabsheader">
            <li lay-id="{:url('nadmin/home/index')}" lay-attr="{:url('index/home/index')}" class="layui-this">主页</li>
        </ul>


        <div class="layui-tab-content layui-fluid iframe-box">
            <div class="layui-tab-item layadmin-tabsbody-item layui-show layui-card" >
                <iframe src="{:url('nadmin/home/index')}" frameborder="0" class="layadmin-iframe" style="width: 100%;height:100%"></iframe>
            </div>

        </div>
    </div>

</div>

</body>
<script>

    layui.use(['element','layer'], function(){
        var element = layui.element; //导航的hover效果、二级菜单等功能，需要依赖element模块
        var title = "";
        var layhref = "";
        var layer = layui.layer;

        //监听导航点击
        element.on('nav(demo)', function(elem){
            //console.log(elem)
            title = elem.text(); //标题
            layhref = elem.attr("lay-href"); //跳转url
        });
        var active = {
            tabAdd: function(){
                var arr = [];
                $(".layui-tab-title").children().each(function(index,e){
                    arr[index] = $(e).attr('lay-id');
                })
                //console.log(arr.indexOf(layhref));return;
                if(arr.indexOf(layhref) >=0){
                    //存在-跳转到该页面
                    element.tabChange('tab', layhref);
                    $(this).data("type","tabChange");
                }else{
                    //定义框架集中的内容
                    var content = '<iframe src="'+layhref+'" frameborder="0" class="layadmin-iframe refreshThis" style="width: 100%;height:100%"></iframe>';
                    //新增一个Tab项
                    element.tabAdd('tab', {
                        title: title //标题
                        ,content: content
                        ,id: layhref
                    })
                    //打开添加的页面
                    element.tabChange('tab', layhref);
                    //添加完成后，将 data-type 修改成 tabChange
                    $(this).data("type","tabChange");
                }

            }
            ,tabChange: function(){
                //切换到指定Tab项
                element.tabChange('tab', layhref); //切换到：用户管理
                var arr = [];
                $(".layui-tab-title").children().each(function(index,e){
                    arr[index] = $(e).attr('lay-id');
                })
                if(arr.indexOf(layhref) <0){
                    //$(this).data("type","tabAdd");
                    //不存在页面，重新打开页面
                    var content = '<iframe src="'+layhref+'" frameborder="0" class="layadmin-iframe" style="width: 100%;height:100%"></iframe>';
                    //新增一个Tab项
                    element.tabAdd('tab', {
                        title: title //标题
                        ,content: content
                        ,id: layhref
                    })
                    //跳转到该页面
                    element.tabChange('tab', layhref);
                }

            }
        };
        $('.site-demo-active').on('click', function(){
            var othis = $(this), type = othis.data('type');
            active[type] ? active[type].call(this, othis) : '';
        });

        $(".refresh").on("click",function(){
            var src=$(".layui-tab-item.layui-show").find("iframe").attr("src"); //找到iframe 的跳转地址
            $(".layui-tab-item.layui-show").find("iframe").attr("src",src);

        })

        $("#basedata").on("click",function(){
            $("#personage_baseData").click()
        })
        $("#safety").on("click",function(){
            $("#personage_safety").click()
        })
        $("#imShow").on("click",function(){
            layer.msg("IM系统正在开发中")
        })
    });


</script>

</html>